<!-- 我需要做一个手机H5网页，代码要求：填写斤数、单价相乘之后在加填写的数字在减填写的数字，最终金额 = (斤数 × 单价) + 加数 - 减数 ，
用最终金额除以（分别填写甲乙斤数默认减2.5之后相加等于多少），之后再用甲乙分别减2.5之后相加得出来的数乘以最终金额除以的数还要显示出来，
之后在用甲乙分别减2.5相加之后显示的数乘以2在除以斤数也要显示出来

//////////////以上内容用deepseek搜索出来显示出来的结果//////////
 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分肉半子计算</title>
    <style>
        body {
            font-family: -apple-system, sans-serif;
            padding: 15px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .input-box {
            background: white;
            padding: 15px;
            margin-top: -35px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            /*margin-bottom: 15px;*/
        }
        input {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .result-box {
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .result-item {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .highlight {
            color: #e91e63;
            font-weight: bold;
            font-size: 18px;
        }
        .ratio-row {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }
        .ratio-item {
            width: 48%;
            /*padding: 10px;*/
            background: #f8f8f8;
            border-radius: 6px;
        }
        .calculation-steps {
            color: #666;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-box">
            <h3>分肉半子计算-猪的基础信息</h3>
            <input type="number" id="weight" placeholder="总斤数">
            <input type="number" id="price" placeholder="单价">
            <input type="number" id="add" placeholder="屠宰和经济等费用">
            <input type="number" id="subtract" placeholder="下货打多少钱">
            
            <h3 style="margin-top:15px;">甲(张驰)乙肉半子斤数</h3>
            <input type="number" id="jia" placeholder="张驰猪肉半子(公斤数)自动减2.5钩子">
            <input type="number" id="yi" placeholder="乙方猪肉半子">
        </div>
 
        <div class="result-box">
            <!-- 基础结果 -->
            <div class="result-item">
                生猪价钱：<em class="highlight" id="totalAmount">0.00</em> 元
            </div>
 
             <!-- 调整后斤数  -->
            <div class="ratio-row">
                <div class="ratio-item">
                    甲方有效斤数：<em id="jiaValid">0.00</em>
                </div>
                <div class="ratio-item">
                    乙方有效斤数：<em id="yiValid">0.00</em>
                </div>
            </div>
 
            <!-- 应得金额 -->
            <div class="ratio-row">
                <div class="ratio-item">
                    甲方：<em class="highlight" id="jiaAmount">0.00</em> 元
                </div>
                <div class="ratio-item">
                    乙方：<em class="highlight" id="yiAmount">0.00</em> 元
                </div>
            </div>
 
            <!-- 中间计算结果 -->
            <div class="result-item">
                肉半子价格（元/公斤）：<em class="highlight" id="baseAmount">0.00</em>
            </div>
 
            <!-- 最终比例 -->
            <div class="result-item">
                出肉率：<em class="highlight" id="totalRatio">0.00</em>
            </div>
        </div>
    </div>
 
<script>
function calculate() {
    // 获取输入值
    const weight = parseFloat(document.getElementById('weight').value)  || 0;
    const price = parseFloat(document.getElementById('price').value)  || 0;
    const add = parseFloat(document.getElementById('add').value)  || 0;
    const subtract = parseFloat(document.getElementById('subtract').value)  || 0;
    const jia = parseFloat(document.getElementById('jia').value)  || 0;
    const yi = parseFloat(document.getElementById('yi').value)  || 0;
 
    // 计算最终金额 
    const totalAmount = (weight * price) + add - subtract;
 
    // 计算有效斤数（确保不小于0）
    const jiaValid = Math.max(jia  - 2.5, 0);
    const yiValid = Math.max(yi  - 2.5, 0);
    const totalValid = jiaValid + yiValid || 1; // 防除零处理 
 
    // 核心计算 
    const baseAmount = totalAmount / totalValid;          // 分配基数 
    const totalRatio = (totalValid * 2) / (weight || 1);  // 最终比例系数 
 
    // 更新显示结果 
    document.getElementById('totalAmount').textContent  = totalAmount.toFixed(2); 
    document.getElementById('jiaValid').textContent  = jiaValid.toFixed(2); 
    document.getElementById('yiValid').textContent  = yiValid.toFixed(2); 
    document.getElementById('baseAmount').textContent  = baseAmount.toFixed(2); 
    document.getElementById('jiaAmount').textContent  = (jiaValid * baseAmount).toFixed(2);
    document.getElementById('yiAmount').textContent  = (yiValid * baseAmount).toFixed(2);
    document.getElementById('totalRatio').textContent  = totalRatio.toFixed(2); 
}
 
// 绑定输入事件 
document.querySelectorAll('input').forEach(input  => {
    input.addEventListener('input',  calculate);
});
</script>
</body>
</html>